<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Transition.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Transition.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Transition.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;엘리먼트의&nbsp;css&nbsp;스타일을&nbsp;조정해&nbsp;부드러운&nbsp;움직임(변형)을&nbsp;표현하는&nbsp;컴포넌트
	@version&nbsp;#__VERSION__#
**/
/**
	엘리먼트의&nbsp;css&nbsp;style의&nbsp;변화를&nbsp;주어&nbsp;움직이는&nbsp;효과를&nbsp;주는&nbsp;컴포넌트
	
	@class&nbsp;jindo.Transition
	@extends&nbsp;jindo.Component
	@uses&nbsp;jindo.Effect
	@uses&nbsp;jindo.Timer
	@keyword&nbsp;transition,&nbsp;트랜지션
**/
jindo.Transition&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Transition.prototype&nbsp;*/
	_nFPS&nbsp;:&nbsp;30,
	
	_aTaskQueue&nbsp;:&nbsp;null,
	_oTimer&nbsp;:&nbsp;null,
	
	_bIsWaiting&nbsp;:&nbsp;true,&nbsp;//&nbsp;큐의&nbsp;다음&nbsp;동작을&nbsp;하길&nbsp;기다리는&nbsp;상태
	_bIsPlaying&nbsp;:&nbsp;false,&nbsp;//&nbsp;재생되고&nbsp;있는&nbsp;상태
	
	/**
		Transition&nbsp;컴포넌트를&nbsp;초기화한다.
		
		@constructor
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{Function}&nbsp;[htOption.fEffect=jindo.Effect.linear]&nbsp;jindo.Effect&nbsp;이펙트&nbsp;함수
			@param&nbsp;{Boolean}&nbsp;[htOption.bCorrection=false]&nbsp;소수점에&nbsp;의해&nbsp;어긋나는&nbsp;사이즈를&nbsp;보정할지&nbsp;여부
	**/
	$init&nbsp;:&nbsp;function(htOption)&nbsp;{
		this._aTaskQueue&nbsp;=&nbsp;[];
		this._oTimer&nbsp;=&nbsp;new&nbsp;jindo.Timer();
		this._oSleepTimer&nbsp;=&nbsp;new&nbsp;jindo.Timer();
		
		this.option({&nbsp;
			fEffect&nbsp;:&nbsp;jindo.Effect.linear,&nbsp;
			bCorrection&nbsp;:&nbsp;false&nbsp;
		});
		this.option(htOption&nbsp;||&nbsp;{});
	},

	/**
		효과가&nbsp;재생될&nbsp;초당&nbsp;frame&nbsp;rate를&nbsp;가져온다.
		
		@method&nbsp;fps
		@return&nbsp;{Number}&nbsp;
	**/
	/**
		효과가&nbsp;재생될&nbsp;초당&nbsp;frame&nbsp;rate를&nbsp;설정한다.
		
		@method&nbsp;fps
		@param&nbsp;{Number}&nbsp;nFPS
		@return&nbsp;{this}&nbsp;
	**/
	fps&nbsp;:&nbsp;function(nFPS)&nbsp;{
		if&nbsp;(arguments.length&nbsp;&gt;&nbsp;0)&nbsp;{
			this._nFPS&nbsp;=&nbsp;nFPS;
			return&nbsp;this;
		}
		
		return&nbsp;this._nFPS;
	},
	
	/**
		트랜지션이&nbsp;진행중인지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;isPlaying
		@return&nbsp;{Boolean}
	**/
	isPlaying&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._bIsPlaying;
	},
	
	/**
		진행되고&nbsp;있는&nbsp;Transition을&nbsp;중지시킨다.
		
		@method&nbsp;abort
		@return&nbsp;{this}
	**/
	abort&nbsp;:&nbsp;function()&nbsp;{
		this._aTaskQueue&nbsp;=&nbsp;[];
		this._oTimer.abort();
		this._oSleepTimer.abort();
		
		if&nbsp;(this._bIsPlaying)&nbsp;{
			/**
				Transition이&nbsp;중단되었을&nbsp;때&nbsp;발생
				
				@event&nbsp;abort
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@example
					//&nbsp;Transition이&nbsp;중단되었을&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
					oTransition.attach(&quot;abort&quot;,&nbsp;function()&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&quot;abort&quot;);
		}

		this._bIsWaiting&nbsp;=&nbsp;true;
		this._bIsPlaying&nbsp;=&nbsp;false;
		
		this._htTaskToDo&nbsp;=&nbsp;null;
		return&nbsp;this;
	},
	
	/**
		Transition을&nbsp;수행한다.
		파라미터를&nbsp;지정(queue&nbsp;메서드와&nbsp;동일)하였을&nbsp;경우에는&nbsp;해당&nbsp;동작을&nbsp;바로&nbsp;실행시키고,&nbsp;파라미터가&nbsp;생략되었을&nbsp;때에는&nbsp;지금까지&nbsp;queue()로&nbsp;지정된&nbsp;동작들을&nbsp;시작시킨다.
		파라미터는&nbsp;function타입으로&nbsp;지정하여&nbsp;콜백을&nbsp;수행할수&nbsp;있다.&nbsp;(예제&nbsp;참고)
		
		@method&nbsp;start
		@param&nbsp;{Number}&nbsp;nDuration&nbsp;Transition이&nbsp;진행될&nbsp;시간
		@param&nbsp;{Array}&nbsp;aCommand&nbsp;적용할&nbsp;명령셋
		@return&nbsp;{this}
		@see&nbsp;jindo.Transition#queue
		@example
			oTransition.start(1000,
				jindo.$(&quot;foo&quot;),&nbsp;{
					&#39;@left&#39;&nbsp;:&nbsp;&#39;200px&#39;
				}
			));
		@example
			oTransition.start(1000,&nbsp;[
				[jindo.$(&quot;foo&quot;),&nbsp;{
					&#39;@left&#39;&nbsp;:&nbsp;&#39;200px&#39;
				}],
				
				[jindo.$(&quot;bar&quot;),&nbsp;{
					&#39;@top&#39;&nbsp;:&nbsp;&#39;200px&#39;
				}]
			]));
		@example
			oTransition.queue(1000,
				jindo.$(&quot;foo&quot;),&nbsp;{
					&#39;@left&#39;&nbsp;:&nbsp;&#39;200px&#39;
				}
			));
			oTransition.start();
	**/
	start&nbsp;:&nbsp;function(nDuration,&nbsp;elTarget,&nbsp;htInfo)&nbsp;{
		if&nbsp;(arguments.length&nbsp;&gt;&nbsp;0)&nbsp;{
			this.queue.apply(this,&nbsp;arguments);
		}
		
		this._prepareNextTask();
		return&nbsp;this;
	},
	
	/**
		Transition을&nbsp;큐에&nbsp;담는다.
		여러&nbsp;단계의&nbsp;Transition을&nbsp;담아두고&nbsp;순차적으로&nbsp;실행시킬때&nbsp;사용한다.&nbsp;start()&nbsp;메서드가&nbsp;호출되기&nbsp;전까지&nbsp;수행되지&nbsp;않는다.
		파라미터&nbsp;aCommand는&nbsp;[(HTMLElement)엘리먼트,&nbsp;(HashTable)Transition정보]로&nbsp;구성되어야&nbsp;하고,&nbsp;여러명령을&nbsp;동시에&nbsp;적용할&nbsp;수&nbsp;있다.
		파라미터로&nbsp;function을&nbsp;지정하여&nbsp;콜백을&nbsp;등록할&nbsp;수&nbsp;있다.
		
		@method&nbsp;queue
		@param&nbsp;{Number}&nbsp;nDuration&nbsp;Transition이&nbsp;진행될&nbsp;시간
		@param&nbsp;{Array}&nbsp;aCommand&nbsp;적용할&nbsp;명령셋
		@return&nbsp;{this}
		@see&nbsp;jindo.Transition#start
		@example
			//&nbsp;하나의&nbsp;엘리먼트에&nbsp;여러개의&nbsp;명령을&nbsp;지정하는&nbsp;예제
			oTransition.queue(1000,
				jindo.$(&quot;foo&quot;),&nbsp;{
					&#39;@left&#39;&nbsp;:&nbsp;&#39;200px&#39;,
					&#39;@top&#39;&nbsp;:&nbsp;&#39;50px&#39;,
					&#39;@width&#39;&nbsp;:&nbsp;&#39;200px&#39;,
					&#39;@height&#39;&nbsp;:&nbsp;&#39;200px&#39;,
					&#39;@backgroundColor&#39;&nbsp;:&nbsp;[&nbsp;&#39;#07f&#39;,&nbsp;&#39;rgb(255,&nbsp;127,&nbsp;127)&#39;&nbsp;]
				}
			);&nbsp;
		@example
			//&nbsp;여러개의&nbsp;엘리먼트에&nbsp;명령을&nbsp;지정하는&nbsp;예&nbsp;1
			oTransition.queue(1000,
				jindo.$(&quot;foo&quot;),&nbsp;{
					&quot;@left&quot;&nbsp;:&nbsp;jindo.Effect.linear(&quot;200px&quot;)
				},
				jindo.$(&quot;bar&quot;),&nbsp;{
					&quot;@top&quot;&nbsp;:&nbsp;jindo.Effect.easeOut(&quot;200px&quot;)
				}
			);
		@example
			//&nbsp;여러개의&nbsp;엘리먼트에&nbsp;명령을&nbsp;지정하는&nbsp;예&nbsp;2
			oTransition.queue(1000,&nbsp;[
				[jindo.$(&quot;foo&quot;),&nbsp;{
					&quot;@left&quot;&nbsp;:&nbsp;jindo.Effect.linear(&quot;200px&quot;)
				}],
				[jindo.$(&quot;bar&quot;),&nbsp;{
					&quot;@top&quot;&nbsp;:&nbsp;jindo.Effect.easeIn(&quot;200px&quot;)
				}]
			]);&nbsp;&nbsp;
		@example
			//&nbsp;엘리먼트를&nbsp;getter&nbsp;/&nbsp;setter&nbsp;함수로&nbsp;지정하는&nbsp;예&nbsp;&nbsp;
			oTransition.queue(1000,&nbsp;[
				[{
					getter&nbsp;:&nbsp;function(sKey)&nbsp;{
						return&nbsp;jindo.$Element(&quot;foo&quot;)[sKey]();
					},
					
					setter&nbsp;:&nbsp;function(sKey,&nbsp;sValue)&nbsp;{
						jindo.$Element(&quot;foo&quot;)[sKey](parseFloat(sValue));
					}
				},&nbsp;{
					&#39;height&#39;&nbsp;:&nbsp;jindo.Effect.easeIn(100)
				}]
			]);&nbsp;&nbsp;
		@example
			//&nbsp;파라미터로&nbsp;function을&nbsp;지정하여&nbsp;콜백을&nbsp;수행하는&nbsp;예제
			oTransition.start(function(){
				alert(&quot;end&quot;)
			});
	**/
	queue&nbsp;:&nbsp;function(nDuration,&nbsp;aCommand)&nbsp;{
		var&nbsp;htTask;
		if&nbsp;(typeof&nbsp;arguments[0]&nbsp;==&nbsp;&#39;function&#39;)&nbsp;{
			htTask&nbsp;=&nbsp;{
				sType&nbsp;:&nbsp;&quot;function&quot;,
				fTask&nbsp;:&nbsp;arguments[0]
			};
		}&nbsp;else&nbsp;{
			var&nbsp;a&nbsp;=&nbsp;[];
			if&nbsp;(arguments[1]&nbsp;instanceof&nbsp;Array)&nbsp;{
				a&nbsp;=&nbsp;arguments[1];
			}&nbsp;else&nbsp;{
				var&nbsp;aInner&nbsp;=&nbsp;[];
				jindo.$A(arguments).forEach(function(v,&nbsp;i){
					if&nbsp;(i&nbsp;&gt;&nbsp;0)&nbsp;{
						aInner.push(v);
						if&nbsp;(i&nbsp;%&nbsp;2&nbsp;===&nbsp;0)&nbsp;{
							a.push(aInner.concat());
							aInner&nbsp;=&nbsp;[];
						}&nbsp;
					}
				});
			}
			
			htTask&nbsp;=&nbsp;{
				sType&nbsp;:&nbsp;&quot;task&quot;,
				nDuration&nbsp;:&nbsp;nDuration,&nbsp;
				aList&nbsp;:&nbsp;[]
			};
			
			for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;nLen&nbsp;=&nbsp;a.length;&nbsp;i&nbsp;&lt;&nbsp;nLen;&nbsp;i&nbsp;++)&nbsp;{
				var&nbsp;aValue&nbsp;=&nbsp;[],
					htArg&nbsp;=&nbsp;a[i][1],
					sEnd;
				
				for&nbsp;(var&nbsp;sKey&nbsp;in&nbsp;htArg)&nbsp;{
					sEnd&nbsp;=&nbsp;htArg[sKey];
					if&nbsp;(/^(@|style\.)(\w+)/i.test(sKey))&nbsp;{
						aValue.push([&nbsp;&quot;style&quot;,&nbsp;RegExp.$2,&nbsp;sEnd&nbsp;]);
					}&nbsp;else&nbsp;{
						aValue.push([&nbsp;&quot;attr&quot;,&nbsp;sKey,&nbsp;sEnd&nbsp;]);
					}
				}
				
				htTask.aList.push({
					elTarget&nbsp;:&nbsp;a[i][0],
					aValue&nbsp;:&nbsp;aValue
				});
			}
		}
		this._queueTask(htTask);
		
		return&nbsp;this;
	},
	
	/**
		진행되고&nbsp;있는&nbsp;Transition을&nbsp;일시중지시킨다.
		Transition이&nbsp;진행중일때만&nbsp;가능하다.&nbsp;(sleep&nbsp;상태일&nbsp;때에는&nbsp;불가능)
		
		@method&nbsp;pause
		@return&nbsp;{this}
	**/
	pause&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this._oTimer.abort())&nbsp;{
			/**
				Transition이&nbsp;일시정지&nbsp;되었을&nbsp;때&nbsp;발생
				
				@event&nbsp;pause
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@example
					//&nbsp;Transition이&nbsp;일시정지&nbsp;되었을&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
					oTransition.attach(&quot;pause&quot;,&nbsp;function()&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&quot;pause&quot;);
		}
		return&nbsp;this;
	},
	
	/**
		일시중지된&nbsp;Transition을&nbsp;재시작시킨다.
		
		@method&nbsp;resume
		@return&nbsp;{this}
	**/
	resume&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this._htTaskToDo)&nbsp;{
			if&nbsp;(this._bIsWaiting&nbsp;===&nbsp;false&nbsp;&amp;&amp;&nbsp;this._bIsPlaying&nbsp;===&nbsp;true)&nbsp;{
				/**
					Transition이&nbsp;재시작&nbsp;될&nbsp;때&nbsp;발생
					
					@event&nbsp;resume
					@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
					@example
						//&nbsp;Transition이&nbsp;재시작&nbsp;될&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
						oTransition.attach(&quot;resume&quot;,&nbsp;function()&nbsp;{&nbsp;...&nbsp;});
				**/
				this.fireEvent(&quot;resume&quot;);
			}
			
			this._doTask();
			
			this._bIsWaiting&nbsp;=&nbsp;false;
			this._bIsPlaying&nbsp;=&nbsp;true;
		
			var&nbsp;self&nbsp;=&nbsp;this;
			this._oTimer.start(function()&nbsp;{
				var&nbsp;bEnd&nbsp;=&nbsp;!self._doTask();
				if&nbsp;(bEnd)&nbsp;{
					self._bIsWaiting&nbsp;=&nbsp;true;
					setTimeout(function()&nbsp;{&nbsp;
						self._prepareNextTask();&nbsp;
					},&nbsp;0);
				}
				
				return&nbsp;!bEnd;
			},&nbsp;this._htTaskToDo.nInterval);
		}
		return&nbsp;this;
	},
	
	/**
		지정된&nbsp;Transition이&nbsp;종료된&nbsp;이후에&nbsp;또&nbsp;다른&nbsp;Transition&nbsp;을&nbsp;수행한다.
		start()&nbsp;메서드는&nbsp;더이상&nbsp;현재&nbsp;진행중인&nbsp;Transition을&nbsp;abort시키지&nbsp;않는다.
		
		@method&nbsp;precede
		@return&nbsp;{this}
		@deprecated&nbsp;start()&nbsp;사용권장
	**/
	precede&nbsp;:&nbsp;function(nDuration,&nbsp;elTarget,&nbsp;htInfo)&nbsp;{
		this.start.apply(this,&nbsp;arguments);
		return&nbsp;this;
	},
	
	/**
		현재의&nbsp;Transition&nbsp;종료&nbsp;후&nbsp;다음&nbsp;Transition&nbsp;진행하기전에&nbsp;지정된&nbsp;시간만큼&nbsp;동작을&nbsp;지연한다.
		
		@method&nbsp;sleep
		@param&nbsp;{Number}&nbsp;nDuration&nbsp;지연할&nbsp;시간
		@param&nbsp;{Function}&nbsp;[fCallback]&nbsp;지연이&nbsp;시작될때&nbsp;수행될&nbsp;콜백함수
		@return&nbsp;{this}
		@example
			oTransition.start(1000,&nbsp;jindo.$(&quot;foo&quot;),&nbsp;{
				&quot;@left&quot;&nbsp;:&nbsp;jindo.Effect.linear(oPos.pageX&nbsp;+&nbsp;&quot;px&quot;)
			}).sleep(500).start(1000,&nbsp;jindo.$(&quot;bar&quot;),&nbsp;{
				&quot;@top&quot;&nbsp;:&nbsp;jindo.Effect.easeOut(oPos.pageY&nbsp;+&nbsp;&quot;px&quot;)
			});
	**/
	sleep&nbsp;:&nbsp;function(nDuration,&nbsp;fCallback)&nbsp;{
		if&nbsp;(typeof&nbsp;fCallback&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			fCallback&nbsp;=&nbsp;function(){};
		}
		this._queueTask({
			sType&nbsp;:&nbsp;&quot;sleep&quot;,
			nDuration&nbsp;:&nbsp;nDuration,
			fCallback&nbsp;:&nbsp;fCallback&nbsp;
		});
		this._prepareNextTask();
		return&nbsp;this;
	},
	
	_queueTask&nbsp;:&nbsp;function(v)&nbsp;{
		this._aTaskQueue.push(v);
	},
	
	_dequeueTask&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;htTask&nbsp;=&nbsp;this._aTaskQueue.shift();
		if&nbsp;(htTask)&nbsp;{
			if&nbsp;(htTask.sType&nbsp;==&nbsp;&quot;task&quot;)&nbsp;{
				var&nbsp;aList&nbsp;=&nbsp;htTask.aList;
				for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;nLength&nbsp;=&nbsp;aList.length;&nbsp;i&nbsp;&lt;&nbsp;nLength;&nbsp;i++)&nbsp;{
					
					var&nbsp;elTarget&nbsp;=&nbsp;aList[i].elTarget,
						welTarget&nbsp;=&nbsp;null;
					
					for&nbsp;(var&nbsp;j&nbsp;=&nbsp;0,&nbsp;aValue&nbsp;=&nbsp;aList[i].aValue,&nbsp;nJLen&nbsp;=&nbsp;aValue.length;&nbsp;j&nbsp;&lt;&nbsp;nJLen;&nbsp;j++)&nbsp;{
						var&nbsp;sType&nbsp;=&nbsp;aValue[j][0],
							sKey&nbsp;=&nbsp;aValue[j][1],
							fFunc&nbsp;=&nbsp;aValue[j][2];
						
						if&nbsp;(typeof&nbsp;fFunc&nbsp;!=&nbsp;&quot;function&quot;)&nbsp;{
							var&nbsp;fEffect&nbsp;=&nbsp;this.option(&quot;fEffect&quot;);
							if&nbsp;(fFunc&nbsp;instanceof&nbsp;Array)&nbsp;{
								fFunc&nbsp;=&nbsp;fEffect(fFunc[0],&nbsp;fFunc[1]);
							}&nbsp;else&nbsp;{
								fFunc&nbsp;=&nbsp;fEffect(fFunc);
							}
							aValue[j][2]&nbsp;=&nbsp;fFunc;
						}
						
						if&nbsp;(fFunc.setStart)&nbsp;{
							if&nbsp;(this._isHTMLElement(elTarget))&nbsp;{
								welTarget&nbsp;=&nbsp;welTarget&nbsp;||&nbsp;jindo.$Element(elTarget);
								switch&nbsp;(sType)&nbsp;{
									case&nbsp;&quot;style&quot;:
										fFunc.setStart(welTarget.css(sKey));
										break;
										
									case&nbsp;&quot;attr&quot;:
										fFunc.setStart(welTarget.$value()[sKey]);
										break;
								}
							}&nbsp;else&nbsp;{
								fFunc.setStart(elTarget.getter(sKey));
							}
						}
					}
				}
			}
			return&nbsp;htTask;
		}&nbsp;else&nbsp;{
			return&nbsp;null;
		}
	},
	
	_prepareNextTask&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this._bIsWaiting)&nbsp;{
			var&nbsp;htTask&nbsp;=&nbsp;this._dequeueTask();
			if&nbsp;(htTask)&nbsp;{
				switch&nbsp;(htTask.sType)&nbsp;{
					case&nbsp;&quot;task&quot;:
						if&nbsp;(!this._bIsPlaying)&nbsp;{
							/**
								Transition이&nbsp;시작될&nbsp;때&nbsp;발생.
								
								@event&nbsp;start
								@param&nbsp;sType&nbsp;{String}&nbsp;커스텀&nbsp;이벤트명
								@example
									//&nbsp;Transition이&nbsp;시작될&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
									oTransition.attach(&quot;start&quot;,&nbsp;function()&nbsp;{&nbsp;...&nbsp;});
							**/
							this.fireEvent(&quot;start&quot;);
						}
						var&nbsp;nInterval&nbsp;=&nbsp;1000&nbsp;/&nbsp;this._nFPS,
							nGap&nbsp;=&nbsp;nInterval&nbsp;/&nbsp;htTask.nDuration;
						
						this._htTaskToDo&nbsp;=&nbsp;{
							aList:&nbsp;htTask.aList,
							nRatio:&nbsp;0,
							nInterval:&nbsp;nInterval,
							nGap:&nbsp;nGap,
							nStep:&nbsp;0,
							nTotalStep:&nbsp;Math.ceil(htTask.nDuration&nbsp;/&nbsp;nInterval)
						};
						
						this.resume();
						break;
					case&nbsp;&quot;function&quot;:
						if&nbsp;(!this._bIsPlaying)&nbsp;{
							this.fireEvent(&quot;start&quot;);
						}
						htTask.fTask();
						this._prepareNextTask();
						break;
					case&nbsp;&quot;sleep&quot;:
						if&nbsp;(this._bIsPlaying)&nbsp;{
							/**
								Transition이&nbsp;휴면&nbsp;상태일&nbsp;때&nbsp;발생
								
								@event&nbsp;sleep
								@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
								@param&nbsp;{Number}&nbsp;nDuration&nbsp;휴면&nbsp;시간
								@example
									//&nbsp;Transition이&nbsp;휴면&nbsp;상태일&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
									oTransition.attach(&quot;sleep&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
							**/
							this.fireEvent(&quot;sleep&quot;,&nbsp;{
								nDuration:&nbsp;htTask.nDuration
							});
							htTask.fCallback();
						}
						var&nbsp;self&nbsp;=&nbsp;this;
						this._oSleepTimer.start(function(){
							/**
								Transition이&nbsp;휴면상태에서&nbsp;깨어났을&nbsp;때&nbsp;발생
								
								@event&nbsp;awake
								@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
								@example
									//&nbsp;Transition이&nbsp;휴면상태에서&nbsp;깨어났을&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
									oTransition.attach(&quot;awake&quot;,&nbsp;function()&nbsp;{&nbsp;...&nbsp;});
							**/
							self.fireEvent(&quot;awake&quot;);
							self._prepareNextTask();
						},&nbsp;htTask.nDuration);
						break;
				}
			}&nbsp;else&nbsp;{
				if&nbsp;(this._bIsPlaying)&nbsp;{
					this._bIsPlaying&nbsp;=&nbsp;false;
					this.abort();
					/**
						Transition이&nbsp;끝났을&nbsp;때&nbsp;발생
						
						@event&nbsp;end
						@param&nbsp;sType&nbsp;(String)&nbsp;:&nbsp;커스텀&nbsp;이벤트명
						@example
							//&nbsp;Transition이&nbsp;끝날&nbsp;때&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
							oTransition.attach(&quot;end&quot;,&nbsp;function()&nbsp;{&nbsp;...&nbsp;});
					**/
					this.fireEvent(&quot;end&quot;);
				}
			}
		}
	},
	
	_isHTMLElement&nbsp;:&nbsp;function(el)&nbsp;{
		return&nbsp;(&quot;tagName&quot;&nbsp;in&nbsp;el);
	},
	
	_doTask&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;htTaskToDo&nbsp;=&nbsp;this._htTaskToDo,
			nRatio&nbsp;=&nbsp;parseFloat(htTaskToDo.nRatio.toFixed(5),&nbsp;1),
			nStep&nbsp;=&nbsp;htTaskToDo.nStep,
			nTotalStep&nbsp;=&nbsp;htTaskToDo.nTotalStep,
			aList&nbsp;=&nbsp;htTaskToDo.aList,
			htCorrection&nbsp;=&nbsp;{},
			bCorrection&nbsp;=&nbsp;this.option(&quot;bCorrection&quot;);
		
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;nLength&nbsp;=&nbsp;aList.length;&nbsp;i&nbsp;&lt;&nbsp;nLength;&nbsp;i++)&nbsp;{
			var&nbsp;elTarget&nbsp;=&nbsp;aList[i].elTarget,
				welTarget&nbsp;=&nbsp;null;
			
			for&nbsp;(var&nbsp;j&nbsp;=&nbsp;0,&nbsp;aValue&nbsp;=&nbsp;aList[i].aValue,&nbsp;nJLen&nbsp;=&nbsp;aValue.length;&nbsp;j&nbsp;&lt;&nbsp;nJLen;&nbsp;j++)&nbsp;{
				var&nbsp;sType&nbsp;=&nbsp;aValue[j][0],
					sKey&nbsp;=&nbsp;aValue[j][1],
					sValue&nbsp;=&nbsp;aValue[j][2](nRatio);
				
				if&nbsp;(this._isHTMLElement(elTarget))&nbsp;{
					if&nbsp;(bCorrection)&nbsp;{
						var&nbsp;sUnit&nbsp;=&nbsp;/^\-?[0-9\.]+(%|px|pt|em)?$/.test(sValue)&nbsp;&amp;&amp;&nbsp;RegExp.$1&nbsp;||&nbsp;&quot;&quot;;
						if&nbsp;(sUnit)&nbsp;{
							var&nbsp;nValue&nbsp;=&nbsp;parseFloat(sValue);
							nValue&nbsp;+=&nbsp;htCorrection[sKey]&nbsp;||&nbsp;0;
							nValue&nbsp;=&nbsp;parseFloat(nValue.toFixed(5));
							if&nbsp;(i&nbsp;==&nbsp;nLength&nbsp;-&nbsp;1)&nbsp;{
								sValue&nbsp;=&nbsp;Math.round(nValue)&nbsp;+&nbsp;sUnit;
							}&nbsp;else&nbsp;{
								htCorrection[sKey]&nbsp;=&nbsp;nValue&nbsp;-&nbsp;Math.floor(nValue);
								sValue&nbsp;=&nbsp;parseInt(nValue,&nbsp;10)&nbsp;+&nbsp;sUnit;
							}
						}
					}
					
					welTarget&nbsp;=&nbsp;welTarget&nbsp;||&nbsp;jindo.$Element(elTarget);
					
					switch&nbsp;(sType)&nbsp;{
						case&nbsp;&quot;style&quot;:
							welTarget.css(sKey,&nbsp;sValue);
							break;
							
						case&nbsp;&quot;attr&quot;:
							welTarget.$value()[sKey]&nbsp;=&nbsp;sValue;
							break;
					}
				}&nbsp;else&nbsp;{
					elTarget.setter(sKey,&nbsp;sValue);
				}
				
				if&nbsp;(this._bIsPlaying)&nbsp;{
					/**
						Transition이&nbsp;진행되는&nbsp;매&nbsp;단계에&nbsp;발생
						
						@event&nbsp;playing
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{HTMLElement}&nbsp;element&nbsp;변화되고있는&nbsp;객체
						@param&nbsp;{String}&nbsp;sKey&nbsp;변화할&nbsp;대상
						@param&nbsp;{String}&nbsp;sValue&nbsp;변화할&nbsp;값
						@param&nbsp;{Number}&nbsp;nStep&nbsp;현재의&nbsp;Transition의&nbsp;단계
						@param&nbsp;{Number}&nbsp;nTotalStep&nbsp;Transition이&nbsp;완료되기까지&nbsp;playing&nbsp;커스텀&nbsp;이벤트가&nbsp;발생할&nbsp;횟수
						@example
							//&nbsp;Transition이&nbsp;진행되는&nbsp;매&nbsp;단계에&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
							oTransition.attach(&quot;playing&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					this.fireEvent(&quot;playing&quot;,&nbsp;{
						element&nbsp;:&nbsp;elTarget,
						sKey&nbsp;:&nbsp;sKey,
						sValue&nbsp;:&nbsp;sValue,
						nStep&nbsp;:&nbsp;nStep,
						nTotalStep&nbsp;:&nbsp;nTotalStep
					});
				}
			}
		}
		htTaskToDo.nRatio&nbsp;=&nbsp;Math.min(htTaskToDo.nRatio&nbsp;+&nbsp;htTaskToDo.nGap,&nbsp;1);
		htTaskToDo.nStep&nbsp;+=&nbsp;1;
		return&nbsp;nRatio&nbsp;!=&nbsp;1;
	}
}).extend(jindo.Component);

//&nbsp;jindo.$Element.prototype.css&nbsp;패치
(function()&nbsp;{
	
	var&nbsp;b&nbsp;=&nbsp;jindo.$Element.prototype.css;
	jindo.$Element.prototype.css&nbsp;=&nbsp;function(k,&nbsp;v)&nbsp;{
		if&nbsp;(k&nbsp;==&nbsp;&quot;opacity&quot;)&nbsp;{
			return&nbsp;typeof&nbsp;v&nbsp;!=&nbsp;&quot;undefined&quot;&nbsp;?&nbsp;this.opacity(parseFloat(v))&nbsp;:&nbsp;this.opacity();
		}&nbsp;else&nbsp;{
			return&nbsp;typeof&nbsp;v&nbsp;!=&nbsp;&quot;undefined&quot;&nbsp;?&nbsp;b.call(this,&nbsp;k,&nbsp;v)&nbsp;:&nbsp;b.call(this,&nbsp;k);
		}
	};
})();</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>